<template>
	<view :class="['vh100',{'dark':theme == 'dark'}]">
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		
		<!-- 头部 -->
		<view class=" bgPart flex alcenter between plr15 zdx100 pt10 pb15">
			<view class="flex alcenter" @click="drawShow=true">
				<image :src="theme=='dark' ? '/static/image/bars2.png' : '/static/image/bars.png'" class="h20 wt20"></image>
				<text class="ft39 ml10 bold">{{symbol}}</text>

				    <image
                    class="fallDrastically1"
                    :src="
                    change <= 0
                        ? '../../static/image/fallDrastically1.png'
                        : '../../static/image/fallDrastically2.png'
                    "
                  ></image>
				<text :class="[' radius2 p2  orange ft12',{' green':change>=0}]" v-if="change">{{change | toFixed2}} %</text>
			</view>
			<div id="" class="flex alcenter">
			    <image src="/static/image/collect.png" class='h20 wt20' id="noCollct" v-if="!hasCollcet" @click="triggerCollcet(true)" style="margin-right: 10rpx;">
			    <image  style="margin-right: 10rpx;" src="/static/image/collect3.png" class='h20 wt20'  id="hasCollct" @click="triggerCollcet(false)" v-else >
				<navigator :url="'/pages/market/kline?type=0&symbol='+symbol">
					<image :src="theme=='dark' ? '/static/image/qushi2.png' : '/static/image/qushi1.png'" class="h20 wt20 wtop22"></image>
				</navigator>
			</div> 
			
		</view>
		<view class="flex  pb15 bgPart">
			<!-- 左侧 -->
			<view class="flex1 plr15">
				<view class="flex alcenter tc overxy posRelt bggray gray7">
					<view   style="bor":class="['flex1 h35 lh35 ft14',{'greenBg white':type=='buy'}]" @click="changeType('buy')">{{$t('trade').buy}}</view>
					<!-- <view class="bor abstrot mt5 bgPart"></view> -->
					<view :class="['flex1 h35 lh35 ft14',{'greenBg white':type=='sell'}]" @click="changeType('sell')">{{$t('trade').sell}}</view>
				</view>
				
				<!-- 市价 限价 -->
				<view class="flex alcenter ft14 bd_input between mt15 mt369 plr10 radius2">
					<text class="flex2 gray7" @click="togglePopup('bottom-share')" data-position="bottom">{{priceType=='limit' ? $t('trade').limit : $t('trade').shi}}</text>
					<!-- <image src="/static/image/pull.png" class="h10 wt10 ml5"></image> -->
				</view>

				<!-- 限市价切换弹窗 -->
				<view class="bg2 h10"></view>
				<uni-popup :show="popType === 'bottom-share'" position="bottom" @hidePopup="togglePopup('')">
					<view class="bottom-content">
						<view class="bottom-content-box tc gray7">
						    <view :class="['bdb_1e ptb10 ft14 bgPart',{'blueColor':priceType=='limit'}]" @click="changePriceType('limit')">{{$t('trade').limit}}</view>
							<view :class="['bdb_1e ptb10 ft14 bgPart',{'blueColor':priceType=='market'}]" @click="changePriceType('market')">{{$t('trade').shi}}</view>
				            <!-- <view class="pt5 pb10">
				            	<view class="bdb_1e ptb10 ft14 bgPart" @click="togglePopup('')">{{$t('trade').cancel}}</view>
				            </view> -->
						</view>
					</view>
				</uni-popup>
				<view class="">
					<view class="" v-show="priceType=='limit'">
						<view class="bd_input flex alcenter radius2">
							<input type="digit" v-model='price' :placeholder="$t('trade.price')" class="h40 flex1 plr10 bdr_input input-uni" />
							<view class="wt80 flex alcenter tc">
								<view class="flex1 sub h12 flex alcenter jscenter" @click="sub">
									<image src="/static/image/sub.png" class="h12 wt12"></image>
								</view>
								<view class="flex1 h12 flex alcenter jscenter" @click="plus">
									<image src="/static/image/plus.png" class="h12 wt12"></image>
								</view>
							</view>
						</view>
						<view class="gray4 mt7" v-if="false">≈{{myCNY}}CNY</view>
					</view>
					<view class=""  v-show="priceType=='market'">
						<view class="bd_input flex alcenter radius2 bgBlack">
							<input type="text" :value="$t('trade.best')" disabled class="h40 flex1 plr10 input-uni" />
						</view>
					</view>
					
					<view class="bd_input flex alcenter between mt15 plr10 radius2">
						<input type="digit" v-model="number" :placeholder="$t('trade.num')" class="h40 flex1 input-uni" @input="inputNum" />
						<view class="gray7 ft16">{{symbol.split('/')[0]}}</view>
					</view>
					<view class="gray7 mt7">{{$t('trade.use')}} {{balance | toFixed4}} {{type=='buy' ? symbol.split('/')[1] :symbol.split('/')[0]}}</view>
					<view class="ptb15">
						 <!-- <slider value="0" @change="sliderChange" step="25" block-color="#02c289" backgroundColor="#253247" activeColor="#02c289" block-size="15" /> --> 
						<view class="flex alcenter around tc tab-box gray7">
							<view :class="['bd_input flex1 radius2',{'bggreen white bd_green': percent==item&&type=='buy'},{'bgred white bd_red': percent==item&&type=='sell'},{'ml10':index>0}]" v-for="(item,index) in percentList" :key='index' @click="changePercent(item)">{{item}}%</view>
						</view>
					</view>
<!-- 					<view class="bd_input flex alcenter between plr10 radius2">
						<input type="text" password class="h40 flex1" v-model="tradePassword" :placeholder="$t('login.e_pdeal')" />
					</view> -->
					<view class="gray7 flex alcenter mt10" style="justify-content: space-between">
						<text>{{$t('trade.amout')}}</text>
						<text class="pl5">{{tradeNum || '--'}}{{symbol.split('/')[1]}}</text>
					</view>
					<view :class="['btn-default mt10 bgred',{'greenBg':type=='buy'}]" style=" border-radius: 16upx;" @click="submit">{{type=='buy'?$t('trade.buy'):$t('trade.sell')}}{{symbol.split('/')[0]}}</view>
				</view>
			</view>
			<!-- 选择排列 -->
			<view class="trade-left flex column">
				<view class="flex between gray4 pr15 ft12">
					<text>{{$t('trade.price')}}</text>
					<text>{{$t('trade.num')}}</text>
				</view>
				<view class="ft12 flex flex1 column">
					<view class="flex1 flex column jsend asks" v-if="ptype!=1"><!-- 取最后的五条记录 -->
						<view class="flex between hg20 alcenter mtn gray7 pr15" v-if="ptype==0 ?index<5 : index<10" :style="'background-size:'+parseInt((item[1]/sellMax)*100)+'% 100%'" :key="index" v-for="(item,index) in sellData" @click="changeNum(item[0])">
							<text class="orange ft12">{{item[0]|toFixedNumber(currentObj.number?currentObj.number:4)}}</text>
							<text v-if="item[1]>0">{{item[1] | toFixed2}}</text>
							<text v-else>{{item[1] | toFixed2}}</text>
						</view>
					</view>
					<view class="mtn">
						<view :class="['green ft18',{'greenColor':type=='buy'}]" class="last_price">${{last_price|toFixed2}}</view>
						<!-- <text class="gray4">≈{{last_price * cny | toFixed2}}CNY</text> -->
					</view>
					<view class="flex1 flex column bids" v-if="ptype!=2">
						<view class="flex between hg20 alcenter mtn gray7 pr15 " v-if="ptype==0 ? index<5 : index<10" :style="'background-size:'+parseInt((item[1]/buyMax)*100)+'% 100%'"  :key="index" v-for="(item,index) in buyData" @click="changeNum(item[0])">
							<text class="green ft12">{{item[0]|toFixedNumber(currentObj.number?currentObj.number:4)}}</text>
							<text v-if="item[1]>0">{{item[1] | toFixed2}}</text>
							<text v-else>{{item[1] | toFixed2}}</text>
						</view>
					</view>
				</view>
				<view class="flex alcenter">
					<view :class="['wt20 h20 flex alcenter jscenter radius2 bd3a',{'bdActive':ptype==0}]" @click="ptype=0">
						<image src="/static/image/pan1.svg" mode="" class="wt15 h15"></image>
					</view>
					<view :class="['wt20 h20 flex alcenter jscenter radius2 bd3a ml5',{'bdActive':ptype==1}]" @click="ptype=1">
						<image src="/static/image/pan2.svg" mode="" class="wt15 h15"></image>
					</view>
					<view :class="['wt20 h20 flex alcenter jscenter radius2 bd3a ml5',{'bdActive':ptype==2}]" @click="ptype=2">
						<image src="/static/image/pan3.svg" mode="" class="wt15 h15"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 左侧边栏交易对 -->
		<view class="left-mode">
			<uni-drawer :visible="drawShow" mode="left" @close="drawShow = false">
				<scroll-view style="height: 100%;" scroll-y="true">
					<view class="pt20">
						<view class="ft16 tc plr10">{{$t('bico.W389')}}</view>
					</view>
					<view :class="['flex alcenter between ptb15 plr15  bdb_1e',{' bggray':symbol==item.symbol}]" :key="idx" v-for="(item,idx) in marketList" @click="changeCurrency(idx)">
						<image :src="item.img" style="width: 5vw;height: 5vw;margin-right: 0vw;border-radius: 10vw;position: relative;top: 0vw;"></image>
						<view class="flex flexend">
							<text class="ft14">{{item.symbol.split('/')[0]}}</text>
							<text class="gray7">/{{item.symbol.split('/')[1]}}</text>
						</view>
						<view :class="[item.rose>=0 ? 'green' : 'red' ]">{{item.close | toFixed2}}</view>
						<view :class="item.rose < 0 ? 'red' : 'green'">{{ item.rose | toFixed2}}%</view>
					</view>
				</scroll-view>
			</uni-drawer>
		</view>
		<!-- 当前委托 -->
		<view class="mt10 bgPart">
			<view class="flex alcenter between ptb10  plr15">
				<view class="flex flexend">
					<!-- <image src="/static/image/dqwt.png" class="h20 wt20 ml5 tw70"></image> -->
					<text class="ft18">{{$t('trade.delegate')}}</text>
					<view class="flex alcenter ml10 ft14">
						<text class="gray7" @click="togglePopup('bottom-entrust')" data-position="bottom">{{enType=='in' ? $t('trade.buy') : $t('trade.sell')}}</text>
						<image src="/static/image/pull.png" class="h10 wt10 ml5"></image>
					</view>
				</view>
				<view class="flex alcenter gray7">
					<!-- <image src="/static/image/shuaxin.png" class="h20 wt20 ml5"></image>
					<view @click="reload" style="display: inline-block;margin-right: 30upx;color: rgb(130, 155, 250);font-size: 28upx;">刷新</view> -->
					<!-- <image src="/static/image/pcjl.png" class="h20 wt20 ml5 tw70"></image> -->
					<navigator url="entrust">{{$t('trade.all')}}</navigator>
				</view>
			</view>
			<!-- 委托类型切换弹窗 -->
			<uni-popup :show="popType === 'bottom-entrust'" position="bottom" @hidePopup="togglePopup('')">
				<view class="bottom-content">
					<view class="bottom-content-box tc gray7">
					    <view :class="['bdb_1e ptb10 ft14 bgPart',{'blueColor':enType=='in'}]" @click="changeEntrustType('in')">{{$t('trade.buy')}}</view>
						<view :class="['bdb_1e ptb10 ft14 bgPart',{'blueColor':enType=='out'}]" @click="changeEntrustType('out')">{{$t('trade.sell')}}</view>
			            <view class="pt5 pb10">
			            	<view class="ptb10 ft14 bgPart" @click="togglePopup('')">{{$t('trade.cancel')}}</view>
			            </view>
					</view>
				</view>
			</uni-popup>
			<view class="en-ul">
				<view class="ptb10 bdb_1e plr15" v-for="(item,index) in enList" :key="item.id">
					<view class="flex between alcenter">
						<view class="flex flex flexend">
							<text :class="['ft14 redColor',{'greenColor':item.matchType=='BUY'}]">{{item.matchType=='BUY'?$t('trade.buy') : $t('trade.sell')}}</text>
							<text class="gray4 pl10">{{item.createTime}}</text>
						</view>
						<view class="blueColor bgBlack radius2 plr20 ptb5" @click="revoke(index,item.matchId)">{{$t('trade.back')}}</view>
					</view>
					<view class="mt15 flex">
						<view class="flex1">
							<text class="gray4">{{$t('trade.price')}}({{item.symbols.split('/')[1]}})</text>
							<view class="mt5">{{item.unit}}</view>
						</view>
						<view class="flex1 tc">
							<text class="gray4">{{$t('trade.num')}}({{item.symbols.split('/')[0]}})</text>
							<view class="mt5">{{item.willNumberB | toFixed2}}</view>
						</view>
						<view class="flex1 tr">
							<text class="gray4">{{$t('trade.dui')}}</text>
							<view class="mt5">{{item.symbols}}</view>
						</view>
					</view>
				</view>
				<view class="tc pt30 pb100" v-if='enList.length==0'>
					<image src="/static/image/nodata.png" class="nodata"></image>
					<view class="gray7" style="color: #bcc2cc;font-size: 12px;font-weight: 400;margin-top:15upx">{{$t('home.norecord')}}</view>
				</view>
				<view class="tc gray7 ptb20" v-show="isBottom">{{$t('home.loading')}}...</view>
				<view class="tc gray7 ptb20" v-show="!hasMore && enList.length>10">{{$t('home.nomore')}}</view>
			</view>
		</view>
		<view v-if="isFinger==1" class="finger_bg">
			<view class="fingerBut" @click="fingerFuc">
				<image src="../../static/image/finger.png" mode=""></image>
				<view class="">点击唤醒验证</view>
			</view>
			<uni-popup :show="type === 'fingerAlert'" position="middle" mode="fixed">
				<view class="uni-center center-box">
					<view class="msg_tit">
						请验证指纹
					</view>
					<view style="width: 100%;text-align: center;padding:25upx 0 0 0;">
						<image class="msg_img" src="../../static/image/fingerprint.png" mode=""></image>
					</view>
					<view style="width: 100%;text-align: center;" class="msg_content">
						使用指纹查看重要信息
					</view>
					<view class="msg_but">
						<button type="default" @click="fingerCancel">{{$t('bico.W461')}}</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	var socketInstance;
	import {mapState,mapActions,mapGetters} from 'vuex';
	import uniDrawer from '@/components/uni-drawer.vue';
	import uniIcon from '../../components/uni-icon.vue';
	import uniPopup from '@/components/uni-popup2.vue';
	import {huobiTicket,commonTradeList,currencyRecord,wallet,currency,cancelCurrency} from '../../common/apiString.js';
	export default {
		components: {
			uniDrawer,
			uniIcon,
			uniPopup
		},
		data() {
			return {
				currentObj:{number:4},
				drawShow:false,
				getCompleteList:null,
				isFinger:"0",
				rate:80,
				current:0,//OTCdex
				apiType:0,
				type:'buy',//买卖类型
				ptype:0,//盘口类型
				cny:6.9,//兑换率
				price: '',//单价
				number: '',//数量
				hasCollcet: 0,
				showLeft: false,//左侧弹窗
				popType:'',//底部弹窗
				priceType:'market',//限价limit市价market
				enType:'in',//当前委托类型
				percentList:[25,50,75,100],//百分比
				percent:'',//选择的百分比
				balance:'',//余额
				last_price:'',//最新价
				buy_price:'',//买的最新价
				sell_price:'',//卖的最新价
				change:'',//涨跌幅
				quotationList:[],//币种列表
				marketList:[],//交易对列表
				enList:[],//当前委托
				page:1,
				isBottom:false,
				hasMore:true,
				legal_name:'',
				symbol:'BTC/USDT',
				currency_name:'',
				legal_id:'',
				currency_id:'',
				sellData: [['0.00', '0.00'], ['--', '--'], ['--', '--'], ['--', '--'],['--', '--']],//，卖盘
				buyData: [['0.00', '0.00'], ['--', '--'], ['--', '--'], ['--', '--'],['--', '--']],//买盘
				first:true,
				usdt_price:1,
				tradePassword:"",
				iiiib:1,
			}
		},
		filters:{
			toFixedNumber: function (value,number) {
				
			 	value = Number(value);
				if(number == null){
					return value.toFixed(4);
				}
			 	return value.toFixed(number);
			 },
			toFixed2: function (value) {
				value = Number(value);
				return value.toFixed(2);
			},  
			toFixed3: function (value) {
				value = Number(value);
				return value.toFixed(3);
			}, 
			 toFixed4: function (value) {
			 	value = Number(value);
			 	return value.toFixed(4);
			 },
		},
		computed:{
			...mapState({
			  theme:state=>state.theme
			}),
			myCNY(){//输入价格折合cny
				return (this.price*this.cny).toFixed(4) || '0.00';
			},
			tradeNum(){//交易额 单价*数量
			    // console.log(this.price,this.number)
				return (this.price*this.number).toFixed(8) || '0.0000000';
			},
			buyMax(){//买盘最大数量
				let list=[],data = this.buyData;
				data.map((item)=>{
					list.push(item[1])
				});
				return Math.max.apply(null, list)
			},
			sellMax(){//卖盘最大数量
				let list=[],data = this.sellData;
				data.map((item)=>{
					list.push(item[1])
				});
				return Math.max.apply(null, list)
			},
		},
		watch: {
		  cny(val) {
			 console.log(val)
		  }
		},
		onLoad(e) {
			// if(uni.getStorageSync('token')&&!uni.getStorageSync('isFinger')){
			// 	this.isFinger = uni.getStorageSync('fingerBool')
			// 	if(this.isFinger){
			// 		uni.hideTabBar()
			// 	}
			// }
			uni.setNavigationBarTitle({
				title:this.$t('trade').trade
			})
			this.changeFooter();
		},
		onShow() {
			if(this.theme=='dark'){
				uni.setNavigationBarColor({
					frontColor:"#ffffff",
					backgroundColor:"#041525"
				})
			}else{
				uni.setNavigationBarColor({
					frontColor:"#000000",
					backgroundColor:"#3e38ec"
				})
			}
			//this.$utils.setTheme(this.theme);
			// 判断是否登录
			// if(!uni.getStorageSync('token')){
			// 	uni.navigateTo({
			// 		url: '/pages/login/login',
			// 	});
			// 	return;
			// }
			if(uni.getStorageSync("klineSymbol")){
				this.symbol = uni.getStorageSync("klineSymbol")
				uni.removeStorageSync("klineSymbol")
			}
			
			var that=this
			that.init();
			//that.changeCurrency(0)
			
			that.tradeDetail();
			that.getCompleteList = setInterval(function(){
				that.initList();
			        that.tradeDetail();
			      },1000)
		},
		mounted(){
			// this.initList();
		},
			
		created(){
			
		},
		beforeDestroy() {
			
		},
		onHide() {
			//this.$socket.closeSocket(socketInstance);//关闭socket
			this.showLeft = false;
			this.popType = '';
			this.iiiib=1
			clearInterval(this.getCompleteList);
		},
		onPullDownRefresh(){
			// console.log('????????????');
			this.initList();
			this.getPrice()
		},
		onReachBottom() {
			if(!this.hasMore) return;
			this.page++;
			var tokens = uni.getStorageSync('token');
			if(tokens){
				this.entrustList();
			}
			// this.entrustList();
		},
		methods: {
			triggerCollcet(e) {
					
					this.$utils.initDataToken({
						url: 'addFavorite',
						data: {
							symbol: this.symbol
						},
						type: 'POST'
					}, (res) => {
						if (this.hasCollcet) {
							
						} else {
							
						}
						this.hasCollcet = !this.hasCollcet;
					})
				
			},
			getDeBuySellArr(al){
				if(al == 1){
					this.buyData=[['0.00', '0.00'], ['--', '--'], ['--', '--'], ['--', '--'],['--', '--']]
				}
				if(al ==2){
					this.sellData=[['0.00', '0.00'], ['--', '--'], ['--', '--'], ['--', '--'],['0.00', '0.00']]//，卖盘
				}
				
			},
			fingerFuc(){
				var that = this
				if('Android'==plus.os.name) {
					// this.type = "fingerAlert";//兼容Android平台
				}
				if(plus.fingerprint.isSupport()){
					if(!plus.fingerprint.isEnrolledFingerprints()){
						plus.nativeUI.toast('当前设备未录入指纹！');
						// if(that.isLang==0){
						// 	plus.nativeUI.toast('当前设备未录入指纹！');
						// }else{
						// 	plus.nativeUI.toast('Current device does not enter fingerprints.');
						// }
						
					}
					plus.fingerprint.authenticate(function(e){
						// if(that.isLang==0){
						// 	plus.nativeUI.toast('指纹匹配成功');
						// }else{
						// 	plus.nativeUI.toast('Fingerprint Matching Successfully');
						// }
						if('Android'==plus.os.name) {
							that.type = "";//兼容Android平台
						}
						uni.setStorageSync('isFinger',true)
						that.isFinger = 0;
						uni.showTabBar();	
					}, function(e){
						plus.nativeUI.toast('指纹匹配失败');
						// if(that.isLang==0){
						// 	plus.nativeUI.toast('指纹匹配失败');
						// }else{
						// 	plus.nativeUI.toast('Fingerprint Matching Failure');
						// }
						if('Android'==plus.os.name) {
							// that.type = "";//兼容Android平台
							plus.fingerprint.cancel();
						}
						
					},{
						message:"授权登录"
					});
				}else{
					plus.nativeUI.toast('此设备不支持指纹设置！');
					// if(that.isLang==0){
					// 	plus.nativeUI.toast('此设备不支持指纹设置！');
					// }else{
					// 	plus.nativeUI.toast('This device does not support fingerprint settings');
					// }
				}
			},
			fingerCancel(){
				// this.type = "";
				plus.fingerprint.cancel();
			},
			changeFooter() {
			  uni.setTabBarItem({
			    index: 0,
			    text: this.$t('tabBar.index')
			  });
			  uni.setTabBarItem({
			    index: 1,
			    text: this.$t('tabBar.business')
			  });
			  uni.setTabBarItem({
			    index: 2,
			    text: this.$t('tabBar.perpetual')
			  });
			  uni.setTabBarItem({
			    index: 3,
			    text: this.$t('tabBar.agreements')
			  });
			  uni.setTabBarItem({
			    index: 4,
			    text: this.$t('tabBar.mine')
			  });
			},
			sliderChange(e) {//滑动条
				console.log('value 发生变化：' + e.detail.value)
			},
			togglePopup(popType){//弹窗
				this.popType = popType;
			},
			changePercent(percent){//切换百分比
			    if(this.balance==0){
					return this.$utils.showLayer(this.$t('trade.notenough'))
				}
				if(this.priceType=='market'){//市价取近的价格
				   this.getPrice();
				   if(!this.price || this.price==''){
				   	return this.$utils.showLayer(this.$t('trade.notbest'));
				   } 
				}else{
					if(!this.price){
						return this.$utils.showLayer(this.$t('trade.p_price'));
					}
				}
				this.percent = percent;
				var newNum;
				if(this.type=='buy'){//数量等于可用余额除以价格*百分比
					newNum = Number(this.balance/this.price*(this.percent)/100);
				}else{//数量等于可用余额*百分比
					newNum = Number(this.balance*(this.percent)/100);
				}
				this.number = ((parseInt( newNum * 10000 ) / 10000 )-0).toFixed(4);
			},
			changeType(type){//切换买入卖出//更新价格/更新余额
				this.type = type;
				this.number = '';
				this.percent = '';
				uni.setStorageSync('tradeType',type);
				this.getPrice()
				if(this.type=='sell'){
					this.currencyDetail(this.symbol.split('/')[0]);
				}else{
					this.currencyDetail(this.symbol.split('/')[1]);
				}
				
			},
			changePriceType(type){//限市价切换
			    this.priceType = type;
				this.togglePopup('');
				this.getPrice();
			},
			changeEntrustType(type){//委托类型切换
			    this.enType = type;
				this.togglePopup('');
				this.clear();
				this.enList=[];
				this.entrustList();
			},
			reload(){
				console.log('lllllll');
				this.togglePopup('');
				this.clear();
				this.enList=[];
				this.entrustList();
			},
			changeNum(price){//点击盘口
			    if(this.priceType=='limit'){
					this.price = price;
				}
			},
			plus(){//加号
				let price = Number(this.price)*10*10;
				price += 1;
				this.price = (price/100).toFixed(4);
			},
			sub(){//减号
				let price = Number(this.price)*10*10;
				if(price<=0){return this.price = 0;};
				price -= 1;
				this.price = (price/100).toFixed(4);
			},
			inputNum(e){//数量输入
                this.percent = '';
				let number = Number(e.detail.value);
				let totalNum = Number(number*this.price);
				if(totalNum>(this.balance-0)){
					return this.$utils.showLayer(this.$t('bico.W473'),);
				}
			},
			getPrice(){//帮助用户筛选最新的交易价
				
			//if(this.iiiib==1){
				this.price = (this.type!='buy') ?
				this.sellData[this.sellData.length-1][0]
				: 
				this.buyData[0][0] ;
				this.last_price = this.price
				//更新钱包余额数据
				//this.currencyDetail(this.getBuySellCoin())
				//this.iiiib=this.iiiib+1
			//}
				
			},
			getBuySellCoin(){
				return this.type=='buy' ? this.symbol.split('/')[1] :this.symbol.split('/')[0]
			},
			changeLegal(index){//OTC
				this.current = index;
			},
			changeCurrency(idx){//交易对切换
			    let data = this.marketList[idx];
				this.currentObj = data
				//this.cny = Number(this.marketList[0].cny);
				this.symbol = data.symbol;
				this.change=data.rose
				//this.legal_id = data.legal_id;
				//this.currency_id = data.currency_id;
				//this.currency_name = data.currency_name;
				let localData={
					symbol:this.symbol,
					// legal_id:this.legal_id,
					// currency_name:this.currency_name,
					// currency_id:this.currency_id,
				}
				uni.setStorageSync('tradeData',localData);
				// this.$socket.closeSocket(socketInstance);
				this.percent='';
				this.price='';
				this.number='';
				this.first=true;
				this.tradeDetail();
				//this.socketData();
				this.showLeft = false;
				if(this.drawShow){
					this.drawShow = false;
				}
				var tokens = uni.getStorageSync('token');
				this.iiiib=1
				if(tokens){
					this.currencyDetail(this.getBuySellCoin());
					this.entrustList();
				}
				this.clear();
			},
		
			initList(){//币种数据
				let that = this;
			
				this.$utils.initData({url:huobiTicket,data:{type:0},type:'post'},(res,msg)=>{
					
					this.marketList = res;
					res.forEach((item,index)=>{
						if(item.symbol==this.symbol){
							this.change=item.rose
							that.last_price =item.close
						}
					})
					
				})
				this.$utils.initDataToken({url:"findFavorite",data:{symbol:this.symbol},type:'post'},(res,msg)=>{
					
					if(res.favorCoinId){
						that.hasCollcet=1
					}else{
						that.hasCollcet=0
					}
				})
			},
			init(){//币种数据
				let that = this;
				this.$utils.initData({url:huobiTicket,data:{type:0},type:'post'},(res,msg)=>{
					uni.stopPullDownRefresh();
					this.marketList = res;
					if(res.length>0){
						var a = 0
						res.forEach((item,index)=>{
							if(item.symbol==this.symbol){
								a=index
							}
						})
						that.changeCurrency(a)
					}
				})
			},
			submit(){//下单
				let that = this;
				if(!that.number){
					return that.$utils.showLayer(this.$t('trade.p_num'));
				}
				if(that.priceType=='market'){//市价取近的价格
				   this.getPrice();
				   if(!this.price || this.price==''){
				   	return that.$utils.showLayer(this.$t('trade.notbest'));
				   } 
				}else{
					if(!that.price){
						return that.$utils.showLayer(this.$t('trade.p_price'));
					}
				}
				
				let url = currency;
				that.$utils.initDataToken({ url: url,data:{
					'unit':that.price,
					'number':that.number,
					'matchType':that.type.toUpperCase(),
					'dealWay':that.priceType.toUpperCase(),
					'symbols':that.symbol
					},type:'get' }, res => {
					that.$utils.showLayer(res);
					that.number='';
					that.currencyDetail(this.getBuySellCoin());
					that.clear();
					that.entrustList();
				});
			},
			currencyDetail(e){//币种余额
			    let that = this;
			
				let dto = {
					valuation:"USDT",
					hide:'N',
					type:'CURRENCY'
				};
				console.log(JSON.stringify(dto))
	            that.$utils.initDataToken({ url: wallet,data:dto,type:'post' }, res => {
					// if(this.type=='buy'){
					// 	that.usdt_price = res.usdt_price;
					// }
					//that.balance = res.accountTotalPrice;
					var filtered  = (res.list).filter(function(element){
						return element.type == e
					});
					if(filtered.length>0){
						that.balance = filtered[0].usedPrice;
					}else{
						that.balance=0.000
					}
					//console.log(filtered)
				});
			},
			// walletFun(){
			//     let that = this;
			// 	let dto = {
			// 		valuation:'USDT',
			// 		hide:'N',
			// 		type:'CURRENCY'
			// 	};
				
			// 	this.$utils.initDataToken({url:wallet,data:dto,type:'get'},(res,msg)=>{
			// 			//uni.stopPullDownRefresh()
			// 			var obj = res;
			// 			that.totalPrice = Number(obj.valuationTotalPrice).toFixed(8);
			// 			//that.cny = (obj.cny).toFixed(2);
			// 			that.tableData = obj.list;
			// 		});
			// },
			tradeDetail(){//盘口历史数据/最新价历史数据
			    let that = this;
				this.$utils.initData({url:commonTradeList,data:{symbol:that.symbol,type:that.apiType},type:'post'},(res,msg)=>{
					//uni.stopPullDownRefresh();
					that.buyData = [];
					that.sellData = [];
					//debugger
					var buyArr=[]
					var buyArrObj = res.bids;//买单
					var sellArrObj = res.asks;//卖单
					
					if(buyArrObj!= undefined && buyArrObj.length>0){
					    buyArrObj.sort(function(x,y){
					        return y[0] - x[0];
					    })
					    for(var i in buyArrObj){
					        that.buyData.push(buyArrObj[i]);
					    }
					    
					    that.buyData = that.buyData.slice(0,11);
									
					    var buyNum =  that.buyData.slice(0,4);
					    buyNum.sort(function(x,y){
					        return y[1]-x[1]
					    })
									
					    // that.last_price = buyNum[0][0];
					}else{
						this.getDeBuySellArr(1)
					}
									
					if(sellArrObj!= undefined && sellArrObj.length>0){
					    sellArrObj.sort(function(x,y){
					        return x[0] - y[0];
					    })
					    for(var i in sellArrObj){
					        that.sellData.push(sellArrObj[i]);
					    }
					    var newArr =that.sellData.slice(0,11);
					    newArr.sort(function(x,y){
					        return y[0] - x[0];
					    })
									
					    that.sellData = newArr;
					    var sellNum =  newArr.slice(0,4);
					    sellNum.sort(function(x,y){
					        return y[1]-x[1]
					    })
					    //that.sell_price = sellNum[0][1];
					}else{
							this.getDeBuySellArr(2)
					}
					//this.getPrice()
				})
			},
			// socketData(){//socket连接
			// 	var that = this;
			// 	return;
			// 	that.$socket.closeSocket(socketInstance);
			// 	var tokens = uni.getStorageSync('token');
			// 	let symbol = this.symbol;
			// 	// console.log(symbol);
			// 	if(symbol  == 'ETH/USM')
			// 	{
			// 		symbol  = 'ETH/USDT'
			// 	}else if(symbol  == 'BTC/USM')
			// 	{
			// 		symbol  = 'BTC/USDT'
			// 	}
			// 	socketInstance = that.$socket.listenFun([{event: "login", params: tokens},{event: "sub",params: "market_depth."+symbol},{event: "sub", params: "daymarket"}],(res)=>{
			// 		let msg = JSON.parse(res);
			// 		// setInterval(()=>{
			// 		// 	uni.sendSocketMessage({
			// 		// 	  data: 'AAA' 
			// 		// 	});
			// 		// },10000)
			// 		if (msg.type == "market_depth") {//更新盘口
			// 			that.buyData = msg.bids;
			// 			that.sellData = msg.asks;
			// 			if(that.first){//第一次进来默认根据当前买卖类型自动填充最优价格（1次）
			// 				that.getPrice();
			// 				that.first = false;
			// 			}
			// 		}
			// 		if (msg.type == "daymarket") {

			// 			if(that.currency_id==msg.currency_id&&that.legal_id == msg.legal_id){//更新最新价
			// 				that.last_price = msg.now_price;
			// 				that.change = msg.change;
			// 			}
			// 			that.marketList[that.current].map((item,index)=>{//更新行情
			// 				if(item.currency_id == msg.currency_id && item.legal_id == msg.legal_id){
			// 					return that.marketList[that.current][index].now_price = msg.now_price;
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			clear(){//恢复委托列表默认值
				let that = this;
				that.page = 1;
				that.isBottom = false;
				that.hasMore = true;
			},
			entrustList(){//委托
				let that = this;
				let type;
				
				that.enType == 'out' ? type='SELL' : type='BUY'
				that.$utils.initDataToken({ url: currencyRecord,data:
				{type:1,
				size:1000,
				symbols:this.symbol.split("/")[0],
				current:that.page},type:'get' }, res => {
					//console.log('data', res)
					//var data = res.records;
					var data  = (res.records).filter(function(element){
						return element.matchType == type
					});
					uni.stopPullDownRefresh();
					that.isBottom=false;
					that.enList = (that.page == 1) ? data : that.enList.concat(data);
					
					that.hasMore = (res.total == data.length) ? true : false;
				});
			},
			revoke(index,id){//撤单
				let that = this;
				that.$utils.initDataToken({ url: cancelCurrency,data:{matchId:id},type:'post' }, res => {
					that.$utils.showLayer(this.$t('bico.W474'),);
					that.enList.splice(index, 1);//动态删掉这个订单
					that.changeType(that.type)
				});
			}
		},
	}
</script>

<style>
	.status_bar {
	  height: 60upx;
	  width: 100%;
	}

	.trade-left {
		width: 300upx;
	}
	.w270 {
		width: 270upx;
	}
	uni-slider {
		margin: 0 0 0 14upx;
	}
	.tab-box view {
		padding: 4upx 0;
	}
	.sub{
		border-right: 1px solid #f5f5f5;
	}
    /* .bor {
		width: 32upx;
		height: 140upx;
		left: calc(50% - 20upx);
		transform: rotate(25deg);
		-ms-transform: rotate(25deg);
		-moz-transform: rotate(25deg);
		-webkit-transform: rotate(25deg);
		-o-transform: rotate(25deg);
	} */
	.en-ul>.bdb_1e:last-child{
		border-bottom: none;
	}
	.p2{
		padding: 0 4upx;
	}
	.dwbg{
		background: rgba(250,82,82,.1);
	}
	.upbg{
		background: rgba(18,184,134,.1);
	}
	.asks>view{
		background-image: linear-gradient(rgba(250,82,82,.1),rgba(250,82,82,.1));
	}
	.bids>view{
		background-image: linear-gradient(rgba(18,184,134,.1),rgba(18,184,134,.1));
	}
	.asks>view,.bids>view{
		background-position: 100%;
		background-repeat: no-repeat;
		background-size: 0% 100%;
	}
	.twd30{
		width: 8vw;
		height: 8vw;
	}
	.ft39{
		font-size: 4vw;
		font-weight: bold;
	}
	
	.ft14 {
	    font-size: 3.6vw;
		font-weight: bold;
	}
	uni-view{
		box-sizing: border-box;
		font-size: 14px;
		
		font-weight:400;
	}
	.pb10 {
	    padding-bottom: 150px;
	}
	.pt5 {
	    padding-top: 0px;
	}
	.pb10 {
	    padding-bottom: 0.5vw;
	}
	.ft18 {
	    font-size: 3.6vw;
	}
	.ft14 {
	    font-size: 3.6vw;
	    font-weight: 400;
	}
	
	.tw70 {
	    position: relative;
	    top: -0.5vw;
	    right: 0vw;
	    left: -1vw;
	}
	.status_bar {
	    height: 6vw;
	    width: 100%;
	}
	.mt369 {
	    line-height:2.8;
	}
	.pb15 {
	    padding-bottom: 20px;
	}
	.pt10 {
	    padding-top: 20px;
	}
	.bor {
	    width: 16px;
	    height: 70px;
	    left: calc(50% - 10px);
	    /* transform: rotate(25deg); */
	    -ms-transform: rotate(25deg);
	    -moz-transform: rotate(25deg);
	    /* -webkit-transform: rotate(25deg); */
	    -o-transform: rotate(25deg);
	}

	.orange {
  color: #ff5f49;
  font-weight: bold;
}

.green {
  color: #4fcf6b;
  font-weight: bold;
}

.greenBg {
  background: #4fcf6b;
  border-radius: 16upx;
}
.last_price{
	font-size: 36upx;
	font-weight: bold;
	margin:20upx 0;
}

.nodata{
	width: 160upx ;
	height: 180upx;
}
.fallDrastically1 {
  width: 32upx;
  height: 32upx;
  margin: 0 5upx 0 10upx;
}
</style>
